<template>
  <div class="createProject">
    <div class="mainScroll">
      <div v-if="!$route.query.from" class="header">
        <i class="el-icon-circle-check" style="color: #5cb6ff"></i
        ><span>创建完成，等待审批</span>
      </div>

      <div style="text-align: center;display:flex;justify-content: center;">
        <div class="step">
          <div justify="center" style="display:flex;" >
            <div
              v-for="(item, index) of nodeTypeList"
              :key="index"
            >
              <span class="node_name_width" :title="item.nodeName">{{
                item.nodeName
              }}</span>
            </div>
          </div>
          <div style="display:flex;">
            <div
              v-for="(item, index) in nodeTypeList"
              :key="index"
              class="center"
            >
              <div
                class="xianLeft"
                :style="index == 0 ? 'visibility: hidden' : ''"
              ></div>
              <div class="dian"></div>
              <div
                :style="
                  index == nodeTypeList.length - 1 ? 'visibility: hidden' : ''
                "
                class="xianRight"
              ></div>
            </div>
          </div>
          <div justify="center" style="display:flex;">
            <div
              :span="12"
              v-for="(item, index) of nodeName"
              :key="index"
              >

                <span class="node_name_width" v-if="index==0" >[创建人]{{
                item
              }}</span>

                <span class="node_name_width" v-if="index==1" >[流转负责人]{{
                item
              }}</span>

                       <span class="node_name_width" v-if="index>1" >{{
                item
              }}</span>

              </div
            >
          </div>
        </div>
      </div>

      <div class="menu">
        <el-row>
          <el-col :span="2">项目编号</el-col>
          <el-col :span="8">
            <el-input v-model="form.proCode" placeholder="" readonly></el-input>
          </el-col>
          <el-col style="visibility: hidden" :offset="2" :span="4"
            >项目编号</el-col
          >
          <el-col style="visibility: hidden" :span="8">
            <el-input placeholder="" readonly></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="2">项目名称</el-col>
          <el-col :span="8">
            <el-input v-model="form.proName" readonly></el-input>
          </el-col>
          <el-col :span="2" :offset="4">合同编号</el-col>
          <el-col :span="8">
            <el-input v-model="form.contractCode" readonly></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">归属分社</el-col>
          <el-col :span="8">
            <el-select
              @change="getBranchContact()"
              v-model="form.branchIds"
              :disabled="true"
              multiple
            >
              <el-option
                v-for="(item, index) of branchList"
                :key="item.branchId"
                :label="item.branchName"
                :value="item.branchId"
                style="width: 250px"
              />
            </el-select>
          </el-col>
          <el-col :span="2" :offset="4">分社对接人</el-col>
          <el-col :span="8">
            <el-select
              v-model="form.branchContactIds"
              placeholder=""
              multiple
              :disabled="true"
            >
              <el-option
                v-for="item in branchIdConcatList"
                :key="item.contactId"
                :label="item.contactName"
                :value="item.contactId"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">项目概述</el-col>
          <el-col :span="22">
            <el-input
              v-model="form.proSummary"
              type="textarea"
              placeholder=""
              readonly
              resize="none"
              :rows="5"
            ></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">项目周期</el-col>
          <el-col :span="10">
            <el-input v-model="form.proStartDay" readonly></el-input>
          </el-col>
          <el-col :span="2" style="text-align: center">~</el-col>
          <el-col :span="10">
            <el-input
              v-model="form.proEndday"
              placeholder=""
              readonly
            ></el-input>
          </el-col>
        </el-row>
      </div>
    </div>

    <div v-if="!$route.query.from" class="lookBox">
      <el-button type="primary" @click="jump">立即查看</el-button>
    </div>
    <div v-else class="lookBox">
      <el-button type="primary" @click="jump">立即分配</el-button>
    </div>
  </div>
</template>

<script>
import {
  http_createObject_branchContact,
  http_createObject_base,
  http_createObject_nodeType,
  http_createObject_editProjectInit,
  http_users,
} from "@/api/createObject";

export default {
  data() {
    return {
      active: 0,
      form: {},
      // 归属分社列表
      branchList: [],
      // 归属分社对接人列表
      branchIdConcatList: [],
      nodeTypeList: [],
      userName: "",
      nodeName: [],
    };
  },
  mounted() {
    this.getEditProjectInit();
    this.getBase();
  },
  methods: {
    // 获取项目初始化数据
    getBase() {
      http_createObject_base().then((res) => {
        if (res.success) {
          // 归属分社
          this.branchList = res.data.branchTOList;
          // console.log(this.branchList);
        } else {
          this.$message(res.message);
        }
      });
    },

    getEditProjectInit() {
      http_createObject_editProjectInit({ id: this.$route.query.id }).then(
        (res) => {
          if (res.success) {
            this.form = res.data;
            // 归属分社联系人
            this.form.branchContactIds = [];
            this.form.contactTOList.forEach((item, index) => {
              this.form.branchContactIds.push(item.contactId + "");
            });

            this.getBranchContact();
            this.getNodeType();
          } else {
            this.$message(res.message);
          }
        }
      );
    },
    // 根据类型获取项目初始节点
    getNodeType() {
      http_createObject_nodeType({ typeId: this.form.proTypeId }).then(
        (res) => {
          if (res.success) {
            this.nodeTypeList = res.data;
            this.getUserLsit();
          } else {
            this.$message(res.message);
          }
        }
      );
    },
    // 获取分社对接人列表
    getBranchContact() {
      http_createObject_branchContact(this.form.branchIds).then((res) => {
        if (res.success) {
          this.branchIdConcatList = res.data;
        } else {
          this.$message(res.message);
        }
      });
    },
    jump() {
      // this.$router.push('/createProject/projectLook')
      if (this.$route.query.from) {
        this.$router.push(
          "/distributionProject/dayTask?id=" + this.$route.query.id
        );
      } else {
        this.$router.push(
          "/distributionProject?id=" +
            this.$route.query.id +
            "&&proNo=" +
            this.form.proCode
        );
      }
    },
    // 项目负责人列表
    getUserLsit() {
      http_users().then((res) => {
        if (res.success) {
          var status = "";
          switch (this.form.proStatus) {
            case 1:
              status = "未发布";
              break;
            case 2:
              status = "审批中";
              break;
            case 3:
              status = "进行中";
              break;
            case 4:
              status = "已完成";
              break;
            case 5:
              status = "已拒绝";
              break;
            case 6:
              status = "未启动";
              break;
          }
          res.data.forEach((item) => {
            if (item.userId == this.form.proManager) {
              this.userName = item.userName;
            }
            var arr = [];
            this.nodeTypeList.forEach((itemA, index) => {
              if (index == 0) {
                arr.push(this.form.createUserName);
              } else if (index == 1) {
                arr.push(this.userName);
              } else {
                arr.push(status);
              }
            });
            this.nodeName = arr;
          });
        } else {
          this.$message(res.message);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.createProject {
  width: 100%;
  -webkit-box-flex: 1;
  flex: 1;
  .mainScroll {
    width: 100%;
    height: 83vh;
    padding: 32px 108px;
    overflow-y: auto;
    .header {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;

      .el-icon-circle-check {
        font-size: 32px;
        margin: 0px 10px;
        color: #cbcbcb;
      }

      span {
        font-size: 18px;
      }
    }

    .step {
      text-align: center;
      margin: 20px 0px;
      color: #aaaaaa;
      display: flex;
      flex-direction: column;
      overflow-x: auto;
      // justify-content: center;
      // align-items: center;
      // padding: 0 30px;
      box-sizing: border-box;
      .stepWrapper {
        display: flex;
        flex-direction: row;
        .stepItem {
          display: flex;
          justify-content: center;
        }
      }
      .centerElRow {
        display: flex;
        justify-content: center;
      }

      .center {
        display: flex;
        align-items: center;
        margin: 10px 0px;
        width:180px;
        .xianLeft {
          width:85px;
          border: 1px solid #aaaaaa;
          background: #aaaaaa;
        }

        .dian {
          width: 11px;
          height: 11px;
          border: 1px solid #797979;
          background: #aaaaaa;
          border-radius: 50%;
          margin: 0px 10px;
        }

        .xianRight {
          width:85px;
          border: 1px solid #aaaaaa;
          background: #aaaaaa;
        }
      }
    }

    .menu {
      width: 100%;
      margin: 50px auto;
      .el-row {
        display: flex;
        align-items: center;
        margin-top: 10px;
      }
    }
  }

  .lookBox {
    cursor: pointer;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    background-color: white;
    text-align: center;
    z-index: 10000;
    // div {
    //   width: 162px;
    //   height: 49px;
    //   text-align: center;
    //   line-height: 49px;
    //   background: #d7d7d7;
    // }
  }
}

.node_name_width {
  width: 180px;
  // font-size: 14px;
  display: inline-block;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
</style>
<style lang="less" scoped>
/deep/.el-textarea__inner {
  padding-right: 60px;
}
/deep/.el-select__tags {
  .el-tag--light {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
}
</style>
